---
type: integration
title: '@astrojs/react'
description: Aprende cómo utilizar la integración del framework @astrojs/react para ampliar el soporte de componentes en tu proyecto Astro.
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/react/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Esta **[integración de Astro][astro-integration]** habilita el renderizado del lado del servidor y la hidratación del lado del cliente para tus componentes [React](https://react.dev/).

## Instalación

Astro incluye un comando `astro add` para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes [instalar las integraciones manualmente](#instalación-manual) en su lugar.

Para instalar `@astrojs/react`, ejecuta lo siguiente desde el directorio de tu proyecto y siga las instrucciones:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add react
  ```
  </Fragment>
</PackageManagerTabs>

Si tienes algún problema, [no dudes en informárnoslo en GitHub](https://github.com/withastro/astro/issues) y prueba los pasos de instalación manual a continuación.

### Instalación manual

Primeron, instala el paquete `@astrojs/react`:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/react
  ```
  </Fragment>
</PackageManagerTabs>

La mayoría de los gestores de paquetes instalarán las dependencias asociadas también. Si ves un mensaje de advertencia "Cannot find package 'react'" (o similar) cuando inicias Astro, deberás instalar `react` y `react-dom`:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install react react-dom
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add react react-dom
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add react react-dom
  ```
  </Fragment>
</PackageManagerTabs>

Luego, aplica la integración a tu archivo `astro.config.*` usando la propiedad `integrations`:

```js ins="react()" ins={2} title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [react()],
});
```

## Empezando

Para usar tu primer componente React en Astro, dirígete a nuestra [documentación de frameworks UI][astro-ui-frameworks]. Explorarás:

* 📦 como se cargan los componentes de framework,
* 💧 opciones de hidratación del lado del cliente, y
* 🤝 oportunidades para mezclar y anidar frameworks juntos

## Opciones

### Combinando múltiples frameworks JSX

Cuando estás utilizando múltiples frameworks JSX (React, Preact, Solid) en el mismo proyecto, Astro necesita determinar qué transformaciones específicas del framework JSX deben usarse para cada uno de tus componentes. Si solo has agregado una integración de framework JSX a tu proyecto, no se necesita configuración adicional.

Utiliza las opciones de configuración `include` (obligatoria) y `exclude` (opcional) para especificar qué archivos pertenecen a qué framework. Proporciona un array de archivos y/o carpetas en `include` para cada framework que estés utilizando. Puedes utilizar comodines para incluir múltiples rutas de archivo.

Recomendamos colocar los componentes comunes de los frameworks en la misma carpeta (p. ej. `/components/react/` y `/components/solid/`) para facilitar la especificación de tus inclusiones, pero esto no es obligatorio:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // Habilita varios frameworks para admitir todo tipo de componentes diferentes.
  // ¡No se necesita `include` si solo estás utilizando un solo framework JSX!
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});
```

### Análisis de los hijos

Los hijos pasados a un componente de React desde un componente de Astro se analizan como strings simples, no como nodos de React.

Por ejemplo, el `<ReactComponent />` a continuación solo recibirá un único elemento hijo:

```astro
---
import ReactComponent from './ReactComponent';
---
<ReactComponent>
  <div>uno</div>
  <div>dos</div>
</ReactComponent>
```

Si estás utilizando una biblioteca que *espera* que se pasen más de un elemento hijo, por ejemplo, para que pueda colocar ciertos elementos en diferentes lugares, es posible que encuentres esto como un bloqueador.

Puedes establecer la bandera experimental `experimentalReactChildren` para indicarle a Astro que siempre pase los hijos a React como vnodes de React. Esto tiene un costo de tiempo de ejecución, pero puede ayudar con la compatibilidad.

Puedes habilitar esta opción en la configuración para la integración de React:

```js title="astro.config.mjs" ins={8}
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  // ...
  integrations: [
    react({
      experimentalReactChildren: true,
    }),
  ],
});
```

[astro-integration]: /es/guides/integrations-guide/

[astro-ui-frameworks]: /es/guides/framework-components/#usando-componente-de-framework
